<template>
  <div class="question-wrap">
    <div class="time">
      <span>{{ getCurrentTime(time) }}</span>
    </div>
    <div class="form-item">
      <div class="form-label title">
        <span>标题</span>
      </div>
      <div class="form-content">
        <el-input v-model="title" placeholder="请输入标题"/>
      </div>
    </div>
    <div class="form-item">
      <div class="form-label title">
        <span>内容</span>
      </div>
      <div class="form-content">
        <el-input v-model="content" placeholder="请输入内容" :rows="3" type="textarea"/>
      </div>
    </div>
    <div class="form-item" v-if="operateCanSave">
      <div class="form-label title">
        <span>答复</span>
      </div>
      <div class="form-content">
        <el-input v-model="apply" placeholder="请输入答复" :rows="3" type="textarea"/>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>

import {defineProps, toRefs, watch, defineExpose} from 'vue'

interface searchDetail {
  title: string
  content: string
  apply: string
  time: string
}

//获取时间
const getCurrentTime = (time: string) => {
  if (time.length < 10) {
    //年
    let year = time.slice(0, 4)
    //月份
    let month = time.slice(4, 6)
    //日
    let day = time.slice(6)
    return year + '年' + month + '月' + day + '日'
  }
  else{
    return  time
  }

}
const props = defineProps<{
  detail: searchDetail,
  operateCanSave: boolean
}>()
const {title, content, apply, time} = toRefs(props.detail)
watch(() => props.detail, (val) => {
  title.value = val.title
  content.value = val.content
  apply.value = val.apply
  time.value = val.time
})
defineExpose({title, content, apply})
</script>

<style lang="scss" scoped>
.question-wrap {
  .time {
    color: #FFFFFF;
    padding-bottom: 24px;
  }

  .form-item {
    display: flex;
    align-items: stretch;
    margin-bottom: 24px;

    .form-label {
      color: rgba(240, 245, 255, 0.95);
      width: 56px;
      margin-right: 12px;
      text-align: right;

      &.title {
        line-height: 32px;
      }

      &.content {
        line-height: 32px;
      }

      &.apply {
        line-height: 32px;
      }
    }

    .form-content {
      flex: 1;

      .el-input {
        --el-input-text-color: #e9e9e9;
      }

      .el-textarea {
        --el-input-text-color: #e9e9e9;
      }
    }
  }
}
</style>
